// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Fk
import Fk.Pages
import Fk.RoomElement

GraphicsBox {
  id: root
  property int maxcolumn: 0
  property int maxrow: 0
  property int curselctcol: 0
  property var selcrows: []
  property var maps: []
  property var mappos: []
  property var mapEnjoyPath: ({})
  property var mapBoderColor: ({})
  property string skill_name: ""
  property string iconpath: AppPath + "/packages/wdtx/image/map/%1.png"

  title.text: luatr("$Choice").arg(luatr(skill_name))
  // y: -50
  width: body.width + 50
  height: body.height + title.height + 20

  // ColumnLayout{
  //   id:descrip_col
  //   width: 80
  //   anchors.top:title.bottom
  //   anchors.topMargin: 10
  //   anchors.left:parent.left
  //   anchors.leftMargin: 3

  //   spacing: 5

  //   Repeater {
  //     model: {{mapEnjoyPath.normonster}}
  //   }
  // }

  Flickable {
    id: body
    flickableDirection: Flickable.VerticalFlick
    width: 450
    height: 400
    // anchors.fill: parent
    anchors.top:title.bottom
    anchors.topMargin: 10
    anchors.left:parent.left
    anchors.leftMargin: 90

    contentWidth: maproot.width
    contentHeight: maproot.height
    clip: true

    Column {
      id: maproot
      visible: mappos.length > 0
      anchors.top: parent.top
      spacing: 8

      Repeater {
        // id: columnRepeater
        model: mappos

        Row {
          spacing: 10

          Repeater {
            id: rowRepeater
            model: modelData
            property int outindex: index

            MetroButton {
              id: metroBtn
              property bool isclick: false
              property string nodename: ""
              Layout.fillWidth: true
              // opacity: modelData > 0 ? 1 : 0.01
              height:28
              width:28
              enabled: modelData > 0
              backgroundColor:{
                metroBtn.isclick = false
                if (modelData > 0){
                  // console.log(curselctcol)
                  // console.log(rowRepeater.outindex)   
                  mapimg.visible = true                       
                  if (rowRepeater.outindex + 1 !== curselctcol){           
                    return ""
                  }else{
                    if(selcrows.length === 0 || selcrows.indexOf(index + 1) !== -1){
                      metroBtn.isclick = true
                      canclick.visible = true
                      return "#66ff66"
                    }              
                  }
                }
                return "#cccccc"
              }
              Image {
                id: mapimg
                visible:false
                anchors.verticalCenter: parent.verticalCenter
                fillMode: Image.PreserveAspectFit
                smooth: true
                height:27
                width:27
                onVisibleChanged: {
                  if (visible) {
                    let curremoves = maps.splice(0,1)
                    metroBtn.border.color = mapBoderColor[curremoves[0]]
                    metroBtn.nodename = curremoves[0]
                    source = iconpath.arg(mapEnjoyPath[curremoves[0]] )  
                  }else{
                    source = ""
                    metroBtn.nodename = ""
                    metroBtn.border.color = "black"
                  }
                }
              }

              Text {
                id: canclick
                visible: false
                anchors.right:parent.right
                // width: parent.width
                // height: parent.height
                text: "✔"
                color: "red"
                // lineHeight: 1.2
                // lineHeightMode: Text.Pro
                wrapMode: Text.WordWrap
                font.pixelSize: 12
                textFormat: TextEdit.RichText
              }

              onClicked: {          
                if(!metroBtn.isclick){
                  toast.show("只能选绿背景节点");
                  return
                }
                close();         
                roomScene.state = "notactive";
                // console.log(index)
                const reply = JSON.stringify(
                  {
                    columnpos: rowRepeater.outindex + 1,
                    rowpos: index+1,
                    choices: metroBtn.nodename,
                  }
                );
                ClientInstance.replyToServer("", reply);
              }
            }
          }
          // property alias rowRepeater: rowRepeater
        }        
      }
    }
  }

  
  // function getRandomInt(min, max) {
  //   return Math.floor(Math.random() * (max - min + 1)) + min; // 返回介于min和max之间的整数
  // }

  function loadData(data) {
    // console.log(data)
    skill_name = data[0];
    maxcolumn = data[3];
    maxrow = data[4];
    curselctcol = data[5];
    selcrows = data[6];
    mapEnjoyPath = data[7];
    mapBoderColor = data[8];

    maps = data[1] ?? [];
    mappos = data[2] ?? [];
    // console.log(maps)
    // console.log(mappos)
    root.y = Math.round(roomArea.height * 0.8 - root.height / 2)
  }
}
